<template>
  <div class="gyurl-wrap">
    <dx-Wrap :name="'接报数'">
      <template v-slot:content>
        879件
      </template>
    </dx-Wrap>
  </div>
</template>
<script>
    import commonDialog from '@/components/commonDialog/common.dialog'
    import commonForm from '@/components/commonForm/commonForm.component'
    import commonWrap from '@/components/customComponents/commonWrap.component'
    import tsCol from '@/components/left/tsCol'
    import dxWrap from '@/components/customComponents/dxWrap.component'
    import api from "@/api/common.api";
    import vueSeamlessScroll from 'vue-seamless-scroll'

    export default {
        components: {
            // commonDialog,
            // commonForm,
            // commonWrap,
            dxWrap,
            // vueSeamlessScroll
            // vueSeamlessScroll
        },
        data () {
            return {
                btnChecked: 3,
                tableData: [],
                defaultOption: {
                    step: 0.2, // 数值越大速度滚动越快
                    limitMoveNum: 12, // 开始无缝滚动的数据量 this.dataList.length
                    hoverStop: true, // 是否开启鼠标悬停stop
                    direction: 1, // 0向下 1向上 2向左 3向右
                    openWatch: true, // 开启数据实时监控刷新dom
                    singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                    singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                    waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
                },
                dialogfieldsList: [
                    // {
                    //     type: 'dict',
                    //     code: 'alarmFklx',
                    //     name: '反馈类型',
                    //     placeholder: '请选择',
                    //     options: [
                    //         {
                    //             code: '1',
                    //             name: '🍉'
                    //         },
                    //     ]
                    // },
                ],
                dialogTableHead: [
                    {
                        prop: 'id',
                        label: '排行',
                        width: "10%"
                    },
                    {
                        prop: 'fraudDataLocation',
                        label: '诈骗URL',
                        width: "40%"
                    },
                    {
                        prop: 'gyTotal',
                        label: '干预次数',
                        width: "15%"
                    },
                    {
                        prop: 'areaName',
                        label: '地区',
                        width: "15%"
                    },
                    {
                        prop: 'fraudType',
                        label: '欺诈类型',
                        width: "15%"

                    },
                   
                ],

            }
        },
        methods: {
            checkBtn (e) {
              this.btnChecked = e
              this.inteveneRankStatic()
            },
            inteveneRankStatic () {
                let params = {
                    timeType: this.btnChecked
                }
                api.inteveneRankStatic(params).then(res=>{
                    // this.$refs.tableForm.getTableData({},res)
                    this.tableData = res
                })
            }

        },
        mounted() {
          this.checkBtn(3)
        }
    }
</script>
<style lang="stylus">
  .seamless-warp{
    padding-top: 40px;
    height: calc(100% - 40px);
    overflow: hidden;
  }
  .gyurl-wrap{
    height: 100%;
    position: relative;
    .bottom-table-head{
      width: 100%;
      padding: 10px 0;
      display: flex;
      background: #0d364d;
      position: absolute;
      top: 40px;
      left: 0;
      z-index: 9;
    }

    .bottom-table-wrap{
      height: 100%;
      .bottom-table-item{
        padding: 10px 0;
        display: flex;
      }
      .bottom-table-item:nth-child(even){
        background: #144066;
      }
    }
    .dd{
      text-align: center;
      color: #b6c3c9 !important;
      font-size: 16px;
    }

    .gyurl-btn-wrap{
      position: absolute;
      top: 0px;
      right: 5px;
      display: flex;
      width: 100%;
      justify-content: flex-end;
      .btn-item{
        padding: 1px 10px;
        border: 2px solid #102f59;
        background: #0e234d;
        color: #12416c;
        cursor: pointer;
        width: calc( 16% - 20px)
        display: flex;
        white-space: nowrap;
        justify-content: center;
        &+.btn-item{
          margin-left: 5px;
        }
        &:hover{
          color: #fff;
          background: #10355e;
          border-color: #1f648f;
        }
      }
      .btn-checked{
        color: #fff;
        background: #10355e;
        border-color: #1f648f;
      }
    }
  }
</style>
